import { makePhoneCall } from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import { LeaseEntity } from "@/entities/LeaseEntity";
import ImageConstant from "@/constant/ImageConstant";
import PhoneImg from "@/static/images/icon/phone.png";
import React, { ReactNode } from "react";
import "./index.less";

interface Props {
  key: number | string;
  lease: LeaseEntity.IPendingLease;
  bottomNode?: ReactNode;
  msgItemNode?: ReactNode;
}
const TenantCard = (props: Props & React.PropsWithChildren) => {
  const { key, lease, bottomNode, msgItemNode } = props;
  /**
   * 拨打租客电话
   */
  const callTenantPhone = (phoneNumber: string) => {
    makePhoneCall({
      phoneNumber,
    });
  };
  return (
    <View className="lease-card" key={key}>
      <View className="house-name">{lease.houseName}</View>
      <View className="lease-content">
        <View className="house-address">
          <Text>地址：</Text>
          <Text>{lease.houseAddress}</Text>
        </View>
        <View className="tenant-wrap">
          <View className="flex items-center">
            <Image
              src={`${ImageConstant.SERVER_ROOT}/${lease.tenantHeadImg}`}
              className="tenant-head-img"
            />
            <View>
              <View className="tenant-name">{lease.tenantName}</View>
              <View className="tenant-phone">{lease.tenantPhone}</View>
            </View>
          </View>
          <Image
            src={PhoneImg}
            className="phone-icon"
            onClick={() => callTenantPhone(lease.tenantPhone)}
          />
        </View>
        {msgItemNode}
      </View>
      {bottomNode}
    </View>
  );
};
export default TenantCard;
